import React from 'react';
import Api from 'Utils/api';
import { Form, Input, message, Button } from 'antd';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import UploadVideo from 'Component/CommonComponents/UploadVideo';
import FILES_TYPE from 'Constants/ShiAnConstants';
import CommonBorder from './../../../../DispatchPage/Components/CommonBorder';
import './index.scss';

const { TextArea } = Input;
const FormItem = Form.Item;
class AddPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isAdd: false,
      id: props.params.id,
      editRecord: '',
      src: '',
    };
    this.onEnter = ::this.onEnter;
    this.initForm = ::this.initForm;
  }
  componentDidMount() {
    this.initForm();
  }
  componentWillMount() {
    const { id } = this.state;
    if (!id) {
      this.setState({ isAdd: true },
      );
    }
  }
  initForm() {
    const { id } = this.state;
    if (id) {
      const api = new Api({
        method: 'GET',
        path: `/documents/${id}`,
        success: (json) => { this.setState({ editRecord: json }); },
        error: (msg) => {
          message.error(msg);
        }
      });
      api.run();
    }
  }
  onEnter() {
    const { id } = this.state;
    const formValue = this.props.form.getFieldsValue();
    this.props.form.validateFieldsAndScroll((err) => {
      if (!err) {
        const currentValue = this.state.editRecord || {};
        let newRecord = { ...currentValue, ...formValue };
        if (!newRecord.media) {
          message.error('请上传视频');
          return;
        }
        if (id) {
          const editApi = new Api({
            method: 'PATCH',
            path: `/documents/admin/${id}`,
            data: newRecord,
            success: () => {
              this.props.dispatch(routerActions.goBack());
            },
            error: (msg) => {
              message.error(msg);
            }
          });
          editApi.run();
        } else {
          const addApi = new Api({
            method: 'POST',
            path: `/documents/admin/${FILES_TYPE.video}`,
            data: newRecord,
            success: (json) => {
              newRecord = json;
              this.props.dispatch(routerActions.goBack());
            },
            error: (msg) => {
              message.error(msg);
            }
          });
          addApi.run();
        }
      }
    });
  }
  render() {
    const title = this.state.isAdd ? '新增' : '修改';
    const { form } = this.props;
    const initialValue = this.state.editRecord ? { ...this.state.editRecord } : '';
    const { getFieldDecorator } = form;
    return (
      <CommonBorder
        title={`科普宣传${title}`}
        content={
          <div className="dynamic-content">
            <Form layout={'horizontal'} className="report-form" >
              <FormItem label="标题" >
                {getFieldDecorator('title', {
                  initialValue: initialValue ? `${initialValue.title}` : '',
                  rules: [
                    { required: true, message: '请输入标题' }
                  ]
                })(
                  <Input placeholder="请输入标题" style={{ width: 840 }} />
                )}
              </FormItem >
              <FormItem label="视频" >
                {getFieldDecorator('media', {
                  initialValue: initialValue ? parseInt(`${initialValue.media}`, 10) : 0,
                })(
                  <UploadVideo />
                )}
              </FormItem >
              <FormItem label="内容" >

                {getFieldDecorator('content', {
                  initialValue: initialValue ? initialValue.content : '',
                  rules: [
                    { required: true, message: '请输入内容' }
                  ]
                })(
                  <TextArea placeholder="请输入内容" rows={4} style={{ width: 840, height: 300 }} />
                )}
              </FormItem >
            </Form >
            <div className="b-wrap">
              <Button className="ok-btn" onClick={this.onEnter.bind(this)}>
                <img src="images/dispatch/icon_public.png" alt="" />
                <span>发布</span >
              </Button>
            </div>
          </div>
        }
      />
    );
  }
}


function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}

export default Form.create()(connect(mapStateToProps)(AddPage));
